<template>
  <div>
    <!-- 上传组件-->
    <el-upload
      v-loading="loading"
      :action="$rootUrl + '/Base_Manage/Upload/Filleimag'"
      :headers="{
        Authorization: 'Bearer ' + TokenCache.getToken(),
      }"
      :multiple="true"
      :file-list="fileList"
      :before-upload="before_Upload"
      :on-success="uploadSuccess"
      :on-exceed="masterFileMax"
      :on-remove="handleRemove"
      :limit="limit"
      :disabled="is_disabled"
      :auto-upload="autoUpload"
      :accept="accept"
      :drag="drag"
      :name="name"
      :data="data"
      :with-credentials="cookieOK"
      :list-type="listType"
      ref="upload"
      class="upCss"
    >
      <el-button size="mini" type="primary" :disabled="is_disabled">点击上传</el-button>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>

    <!-- 图片预览组件 -->
    <img-view
      :show="imageViewerVisible"
      :url-list="imageViewerList"
      @close="imageViewerVisible = false"
    >
    </img-view>
  </div>
</template>
<script>
import TokenCache from "@/utils/cache/TokenCache";
// 引入图片预览组件
import ImgView from "@/components/imgView.vue";
// 下载文件方法（之前写过，有兴趣的小伙伴可以搜：Base64转File）
//   import { dataURLtoFile } from "@/utils";
export default {
  components: {
    ImgView,
  },
  props: {
    // 上传文件的地址 必填
    url: { type: String, required: true },
    // 这里是为了当我们没有点击提交时 父组件通过绑定的数组进行删除上传的文件
    value: { type: Array },
    // 这里是为了显示文件
    fileData: { type: Array },
    // 上传文件的格式
    fileType: { type: Array },
    //   最大允许上传个数
    limit: { type: Number, default: 3 },
    // 是否禁止上传
    is_disabled: {
      //是否禁止，true是禁止，false不禁止
      type: Boolean,
      default: true,
    },
    data: {
      //上传时额外带的参数
      type: Object,
      default: () => {
        return {};
      },
    },
    name: {
      //上传的文件字段名
      type: String,
      default: "file",
    },
    cookieOK: {
      //支持发送 cookie 凭证信息
      type: Boolean,
      default: false,
    },
    drag: {
      //是否启用拖拽上传
      type: Boolean,
      default: false,
    },
    listType: {
      // 文件列表的类型 - text/picture/picture-card
      type: String,
      // default: "picture-card",
      default: "text",
    },
    /**
     * 自动上传参数
     * */
    autoUpload: {
      // 是否需要选取完自动上传功能
      type: Boolean,
      default: true,
    },
    accept: {
      //接受文件类型-图片上传类型-不同的格式之间以逗号隔开
      type: String,
      // default:'.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      default: "",
    },
  },
  model: {
    prop: "value",
    event: "update",
  },
  data() {
    return {
      // 预览的图片数据
      imageViewerList: [],
      // 是否展示图片预览组件
      imageViewerVisible: false,
      // 获取token工具
      TokenCache,
      myUrl: "",
      fileList: [],
      // 当前上传的文件列表
      arrayModel: [],
      loading: false,
    };
  },

  created() {
    // 处理传过来的url 这里我传图片请求头要带token,如果不需要可删除
    //   this.myUrl = `${this.url}?token=${token}`;
    //   this.myUrl = `${this.url}`;
    // 这里是为了如果传过文件 那么显示出来有文件
    // console.log("最终upload组件获取到的filedata", this.fileData);
    // if (this.fileData !== null) {
    //   this.fileList = this.fileData;
    // }
  },
  watch: {
    // 监听传递过来的图片数据  不要卸载created里面  否则会出现无数据的情况
    fileData(o) {
      if (o) this.fileList = this.fileData;
    },
  },
  mounted() {},
  methods: {
    // 图片上传个数校验
    // 图片上传个数校验
    masterFileMax(files, fileList) {
      this.$emit("masterFileMax");
      this.$message.warning(`请最多上传3个图片`);
    },
    // 上传图片预览
    // 图片预览
    imgViewChange(row) {
      // 将展示的图片到数组
      this.imageViewerList[0] = row.jietu;
      // 显示预览组件
      this.imageViewerVisible = true;
    },
    // 删除文件是触发的钩子
    handleRemove(file) {
      console.log("子组件删除附件", file, this.fileList);
      // 看当前有多少个文件
      for (let i = 0; i < this.fileList.length; i++) {
        // 要删除的文件 == 已经上传过的文件
        if (file.uid == this.fileList[i].uid) {
          // 从文件列表中删除
          this.fileList.splice(i, 1);
          this.arrayModel.splice(i, 1);

          let fileData = this.fileList.map((item) => {
            return {
              name: item.name,
              url: item.response?item.response.url:item.url,
            };
          });

          let newFileData = [];
          fileData.forEach((item) => {
            newFileData.push(item.url);
          });

          this.$emit("handleRemove", fileData, newFileData);

          // 后续打开
          // 发起请求 删除文件
          // this.$http({
          //   url: this.$http.adornUrl(`/sys/file/deleteRelated`),
          //   method: "post",
          //   params: fileName: this.arrayModel[i]
          // }).then(res=>{
          //   // 更新绑定的v-model
          //   this.arrayModel.splice(i, 1);
          //   this.$emit("update", this.arrayModel);
          // });
        }
      }
    },

    // 下载文件 或放大
    handlePictureCardPreview(file) {
      // 将展示的图片到数组
      this.imageViewerList[0] = file.url;
      // 显示预览组件
      this.imageViewerVisible = true;

      // 暂时不打开  以下为下载逻辑  后续需要打开
      // this.loading = true;
      // if (!file.base) {
      //   this.$message({
      //     message: "刚刚上传的文件还需要下载？",
      //     type: "warning"
      //   });
      //   return
      // }
      // // 获取文件Base64格式
      // this.$http({
      //   url: this.$http.adornUrl(`/sys/file/getFile`),
      //   method: "get",
      //   params: this.$http.adornParams({
      //     fileName: file.base
      //   })
      // }).then(({ data }) => {
      //   // 下载文件
      //   dataURLtoFile(data.bean, file.name);
      // });
    },

    //上传前的操作，一般来判断文件的格式和大小
    before_Upload(file) {
      //    待校验格式
      // 上传图片之前格式校验  暂时不删除  后续有需要打开即可
      // const isJpgOrPng = file.type === "image/png" || file.type === "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isJpgOrPng) {
      //   this.$message.error("请上传正确格式文件!");
      // } else if (!isLt2M) {
      //   this.$message.error("文件大小不能超过 2MB!");
      // }
      // return isJpgOrPng && isLt2M;

      // 设置默认上传文件格式（不知道的搜 MIME类型 ）  暂时不删除
      // let myType = [
      //   "application/msword",
      //   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      //   "application/pdf"
      // ];
      // // 和传进来的文件格式合并一下
      // if (this.fileType) {
      //   for (let i = 0; i < this.fileType.length; i++) {
      //     myType.push(this.fileType[i]);
      //   }
      // }
      // const isIMAGE = myType.includes(file.type);
      // const isLt = file.size / 1024 / 1024 < 30;
      // if (!isIMAGE) {
      //   this.$message.error("文件上传格式错误！");
      //   return false;
      // }
      // if (!isLt) {
      //   this.$message.error("文件大于30MB！");
      //   return false;
      // }
    },

    // 文件上传成功的钩子
    uploadSuccess(response, file, fileList) {

      // // 更新一下 文件列表
      this.fileList = fileList;

      // if (response.code !== 0) return;
      // 这里 arrayModel 存储的是后端返回的编译后的文件名
      this.arrayModel.push(response.Url);

      console.log('打印this.arrayModel', this.arrayModel)

      // console.log('子组件上传附件', response, file, fileList, this.arrayModel)
      let fileData = fileList.map((item) => {
        console.log('upload组件文件上传', fileList, item, response)
        return {
          name: item.name,
          url: item.response?item.response.Data:item.Data,
        };
      });
    

      let newFileData = [];
      fileData.forEach((item) => {
        newFileData.push(item.url);
      });
      console.log('上传后的upload子组件里的',fileData , newFileData)
      // console.log('需要传递的', newFileData)
      // 上传成功则往v-model数据上添加
      this.$emit("uploadSuccess", fileData, newFileData);
    },
  },
};
</script>
   
<style scoped lang="less">
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upCss {
  display: flex;
  flex-direction: column;
  ::v-deep .el-upload--picture-card{
    background-color: transparent ;
    border: none ;
    line-height: 44px ;
    height: 0px;
  }
  /*覆盖element上传组件的listtype样式*/
  ::v-deep .el-upload.el-upload--text{
    display: flex;
  }
  ::v-deep .el-upload-list.el-upload-list--text{
    margin-left: 10px;
    display:flex;
    border:1px solid transparent;
    display: flex;
    flex-direction: column;
    .el-upload-list__item.is-success{
      height: 20px;
      width: 100%;
    }
    
  }
  ::v-deep .el-upload-dragger {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ::v-deep .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
}

.el-upload-list__item {
  ::v-deep .el-upload-list__item {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.upDate {
  width: 100px;
  height: 100px;
  text-align: center;

  p {
    margin: 2px;
  }
}

::v-deep .el-upload {
  width: 100%;
}

::v-deep .el-upload .el-upload-dragger {
  width: 100%;
}
</style>